<template>
  <VGroup>
    <el-select v-model="info.RefundReason1" v-bind="options" placeholder="一级退款原因" @change="handleChangeFirst">
      <el-option v-for="item in firstOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <el-select v-model="info.RefundReason2" v-bind="options" placeholder="二级退款原因">
      <el-option v-for="item in optionsData.secondary" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </VGroup>
</template>
<script setup>
import { getReasonOptions } from "@/views/user/refund/api/index"
import { apiGetPlatform } from "@/api/public"
import { getReasonList } from "../../api/index"
const props = defineProps({
  firstOption: { type: Array, default: () => [] },
  info: { type: Object, default: () => ({}) },
})
const optionsData = reactive({
  first: [],
  secondary: [],
})

const options = {
  filterable: true,
  clearable: true,
  style: { width: "180px" },
}
onMounted(async () => {})
const handleChangeFirst = (e) => {
  props.info.RefundReason2 = ""
  if (e) {
    getSecondaryOptions(e)
  }
}

// 获取二级退款原因
const getSecondaryOptions = async (id) => {
  try {
    const { data } = await getReasonOptions({ parent_id: id })
    optionsData.secondary = data?.filter((v) => v.is_enable == 1)?.map((n) => ({ label: n.reason, value: n.id }))
  } catch (e) {
    props.info.RefundReason2 = ""
    optionsData.secondary = []
  }
}
defineExpose({
  getSecondaryOptions,
})
</script>
